
<template>

  <div class="MessageBox">
      <div class="MessageList" v-for="(item,index) in MessageList" :key="index">

      <div class="RightBox">
    <div class="avatar">
   <el-avatar>
    user
  </el-avatar>
   </div>  

   <div class="userBox">
   <span>{{item.username}}</span>
   <span>[{{item.message}}]</span>
  </div>
  
  </div>

  <div class="timeBox">
    <span>9月6日</span>
  </div>

    </div>

  </div>
  </template>
  <script>
  
  export default {
    data() {
      return {
       MessageList:[
        {id:'1',username:'张三',message:'你好'},
       {id:'2',username:'张四',message:'你是谁'},
       {id:'3',username:'张五',message:'写完作业没有'},
       {id:'4',username:'张六',message:'你这'},]

      };
    },
    components:{
     
    },
    methods: {
    
    }
  
  }
  </script>
  
  <style scoped>
  .MessageList{
    padding: 10px;
    display: flex;
    justify-content: space-between;

  }
  .MessageList:hover{
    background-color: rgba(225, 227, 230);

  }
.RightBox{
  display: flex;
}
.timeBox{
  font-size: 12px;
 color: grey;
 padding: 5px;
}
.avatar{
 padding: 5px;
}
.userBox span{
display: block;
}
.userBox{
  padding: 5px;
}
.userBox span:first-child {
 font-size: 14px;
 font-weight: 800;
}

.userBox span:last-child{
  font-size: 12px;
 color: grey;
}
  </style>